<template>
  <div class="personnel-change-list">
    <div class="page-header">
      <!-- <router-link class="back-link" to="/main/renshi/renshizhidu/yfrsyidong/yfrsyidong">
                <i class="el-icon-arrow-left"></i>
                返回
            </router-link> -->
      <el-button
        type="primary"
        style="margin-right: 20px"
        @click="$router.push('/main/renshi/renshizhidu/yfrsyidong/yfrsyidong')"
        icon="el-icon-back"
        >返回</el-button
      >
      <h2>月份人事异动令列表</h2>
    </div>
    <div class="search-container">
      <!-- <div class="page-header"> -->
      <div class="search-item">
        <!-- <label>月份：</label> -->
        <input v-model="searchForm.monthValue" placeholder="请输入月份" />
      </div>
      <div class="search-item">
        <!-- <label>文号：</label> -->
        <input v-model="searchForm.docNumber" placeholder="请输入文号" />
      </div>
      <div class="search-item">
        <!-- <label>审核人：</label> -->
        <input v-model="searchForm.reviewer" placeholder="请输入审核人" />
      </div>
      <div class="search-item">
        <!-- <label>核准人：</label> -->
        <input v-model="searchForm.approver" placeholder="请输入核准人" />
      </div>
      <div class="search-buttons">
        <button @click="handleSearch">搜索</button>
        <button @click="handleReset">重置</button>
        <button @click="handleAdd">新增</button>
        <!-- <button @click="goBock">返回</button> -->
      </div>
      <!-- </div> -->
    </div>
    <div class="search-container">
      <table border="1" style="width: 100%; text-align: center">
        <thead>
          <tr>
            <th>序号</th>
            <th>月份</th>
            <th>文号</th>
            <th>序号</th>
            <th>审核人</th>
            <th>核准人</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData" :key="item.id">
            <td>{{ (current - 1) * size + index + 1 }}</td>
            <td>{{ item.monthValue }}</td>
            <td>{{ item.docNumber }}</td>
            <td>{{ item.serialNumber }}</td>
            <td>{{ item.reviewer }}</td>
            <td>{{ item.approver }}</td>
            <td>{{ formatDate(item.createTime) }}</td>
            <td>
              <button @click="handleView(item)">查看</button>
              <button @click="handleEdit(item)">编辑</button>
              <button @click="handleDelete(item.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="pagination">
      <button :disabled="current === 1" @click="handlePageChange(current - 1)">
        上一页
      </button>
      <span>第 {{ current }} 页 / 共 {{ total }} 条</span>
      <button
        :disabled="current * size >= total"
        @click="handlePageChange(current + 1)"
      >
        下一页
      </button>
    </div>
  </div>
</template>

<script>
import { getPersonnelChangePage, deletePersonnelChange } from "@/api/personnel";

export default {
  data() {
    return {
      searchForm: {
        monthValue: "",
        docNumber: "",
        reviewer: "",
        approver: "",
      },
      tableData: [],
      current: 1,
      size: 10,
      total: 0,
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    formatDate(dateStr) {
      if (!dateStr) return "";
      return dateStr.split("T")[0];
    },
    async fetchData() {
      try {
        const result2 = await getPersonnelChangePage(
          this.current,
          this.size,
          this.searchForm
        );
        const result = result2.data;
        if (result.data) {
          this.tableData = result.data.records;
          this.total = result.data.total;
        }
      } catch (error) {
        console.error("获取数据失败", error);
        this.$message.error("获取数据失败");
      }
    },
    handleSearch() {
      this.current = 1;
      this.fetchData();
    },
    handleReset() {
      this.searchForm = {
        monthValue: "",
        docNumber: "",
        reviewer: "",
        approver: "",
      };
      this.current = 1;
      this.fetchData();
    },
    goBock() {
      this.$router.push("/main/renshi/renshizhidu/yfrsyidong/yfrsyidong");
    },
    handleAdd() {
      this.$router.push("/main/renshi/renshizhidu/yfrsyidong/yfrsyidong");
    },
    handleView(row) {
      this.$router.push({
        path: "/main/renshi/renshizhidu/yfrsyidong/yfrsyidong",
        query: { id: row.id, type: "view" },
      });
    },
    handleEdit(row) {
      this.$router.push({
        path: "/main/renshi/renshizhidu/yfrsyidong/yfrsyidong",
        query: { id: row.id, type: "edit" },
      });
    },
    async handleDelete(id) {
      try {
        await this.$confirm("确认删除该记录吗？");
        const result = await deletePersonnelChange(id);
        if (result) {
          this.$message.success("删除成功");
          this.fetchData();
        }
      } catch (error) {
        if (error !== "cancel") {
          console.error("删除失败", error);
          this.$message.error("删除失败");
        }
      }
    },
    async handlePageChange(page) {
      this.current = page;
      await this.fetchData();
    },
  },
};
</script>

<style scoped>
/* 容器样式 */
.personnel-change-list {
  padding: 20px;
  /* background-color: #f5f7fa; */
  border-radius: 8px;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
  min-height: calc(100vh - 40px);
  width: 1200px;
  margin: 0 auto;
}

/* 页面头部样式 */
.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  background-color: #fff;
  padding: 0px 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* 返回链接样式 */
.back-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #409eff;
  font-size: 16px;
  margin-right: 20px;
  transition: all 0.3s;
}

.back-link i {
  margin-right: 5px;
}

.back-link:hover {
  opacity: 0.8;
}

/* 标题样式 */
.page-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  color: #303133;
}

.search-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background-color: #fff;
  padding: 20px 10px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.search-item {
  display: flex;
  align-items: center;
}

.search-item label {
  margin-right: 8px;
  color: #606266;
}

.search-item input {
  padding: 5px 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  width: 180px;
  margin: 0px 10px;
}

.search-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}

table {
  border-collapse: collapse;
  margin-bottom: 20px;
  width: 100%;
}

th,
td {
  padding: 12px 8px;
  border: 1px solid #ddd;
  text-align: center;
}

th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: bold;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

button {
  padding: 8px 15px;
  cursor: pointer;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s;
  font-family: "宋体";
  font-size: 1em;
  margin-left: 10px;
}

button:hover {
  background-color: #66b1ff;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background-color: #a0cfff;
}

.search-buttons button:nth-child(2) {
  background-color: #909399;
}

.search-buttons button:nth-child(2):hover {
  background-color: #a6a9ad;
}
</style>